<template>
  <div class="topic-add">
    <el-form ref="form" :model="blogForm" label-position="top">
      <el-input v-model="blogForm.id" type="hidden"></el-input>
      <el-form-item label="标题">
        <el-input v-model="blogForm.title" maxlength="100" show-word-limit></el-input>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="封面">
            <el-upload class="cover-uploader"
                       :action="baseUrl+`/upload/img`"
                       :show-file-list="true"
                       accept="image/*"
                       :on-success="handleUploadCoverSuccess"
                       :before-upload="beforeCoverUpload">
              <el-image v-if="blogForm.picture" :src="blogForm.picture | filterImg" fit="cover" alt=""
                        class="cover"></el-image>
              <i v-else class="el-icon-plus cover-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="简介">
            <el-input type="textarea" rows="6" v-model="blogForm.description" show-word-limit
                      maxlength="200"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="内容">
        <v-md-editor v-model="blogForm.content" height="500px"
                     left-toolbar="undo redo clear | h bold italic strikethrough quote | todo-list | ul ol table hr | emoji link image code | save"
                     right-toolbar="preview toc sync-scroll fullscreen"
                     :disabled-menus="[]"
                     @upload-image="handleUploadImage" @save="saveContent"></v-md-editor>
      </el-form-item>
      <el-form-item>
        <el-button class="publish-btn" type="primary" @click="publish">发布</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {uploadImg} from "../../api/upload";
import {publishBlog} from "../../api/blog";

export default {
  name: "BlogAdd",
  data() {
    return {
      blogForm: {
        id: '',
        title: '',//标题
        picture: '',//封面
        content: '# 标题1 ',
        description: '',
        authorId: ''
      }
    }
  },
  methods: {
    //图片上传成功回调钩子
    handleUploadCoverSuccess(res, file, fileList) {
      let data = res.data
      if (data.path) {
        this.blogForm.picture = data.path
      }
    },
    //图片上传失败回调钩子
    beforeCoverUpload(file) {

    },
    //Markdown编辑器本地图片上传
    handleUploadImage(event, insertImage, files) {
      // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
      // console.log(insertImage)
      files.forEach(file => {
        uploadImg(file).then(res => {
          let path = res.data.data.path
          // 此处只做示例
          insertImage({
            url: process.env.VUE_APP_IMG_SERVER + path.replaceAll('\\', '/'),
            // 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg',
            desc: file.name,
            width: '100%',
            // height: 'auto',
            display: 'block'
          });
        })
      })

    },
    saveContent(text, html) {
      console.log(text)
      console.log(html)
    },
    uploadImg(file) {
      uploadImg(file).then(res => {
        return res.data.data.path;
      })
    },
    publish() {
      let blogVo = this.blogForm
      blogVo["authorId"] = this.$store.getters.user.id
      publishBlog(blogVo).then(res => {
        let data = res.data
        console.log(data)
        this.blogForm = data.data
        this.$message.success("发布成功")
      })
      console.log(this.blogForm)
    }
  },
  filters: {
    filterImage(url) {
      return require('../../assets/image/wallhaven-wq56px.jpg')
    },
  },
  computed: {
    baseUrl() {
      return process.env.VUE_APP_BASE_URL
    }
  }
}
</script>

<style scoped>
.topic-add {
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
}

.cover-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.cover-uploader >>> .el-upload:hover {
  border-color: #409EFF;
}

.cover-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 256px;
  height: 144px;
  line-height: 144px;
  text-align: center;
}

>>> .el-image.cover {
  width: 256px;
  height: 144px;
  display: block;
}

.publish-btn {
  float: right;
}

.publish-btn:after {
  content: '';
  display: block;
  clear: both;
}
</style>
